<script lang="ts" setup>
import { getIcon } from '@/api/assets/assets';
import { getUserMeta } from '@/api/PersonalSpace/PersonalInfo';
import AppHeader from '@/components/Header/index.vue';
import SideBar from '@/components/NewSider/index.vue';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import detailBg from '@/assets/detail_background_page.png';
import squareBg from '@/assets/square_home_background.png';
const router = useRouter();
const route = useRoute();

// 使用细节背景图正则判断列表如下
const detailBackgroundRegexList = [/^\/user\/data\/\d+$/, /^\/user\/model\/\d+$/];

// 计算背景图URL
const backgroundImage = computed(() => {
  if (detailBackgroundRegexList.some(regex => regex.test(route.path)))
    return `url(${detailBg})`;

  return `url(${squareBg})`;
});

// 用户头像
const userAvatar = ref('');
// 用户昵称
const userName = ref('');

// 获取用户头像和用户真实姓名
const fetchUserInfo = async () => {
  try {
    const data = await getUserMeta();
    userAvatar.value = data.userImage;
    // 如果不存在用户头像，则使用默认头像
    if (userAvatar.value === null) {
      const img = await getIcon(['user-avatar-default.jpg']);
      userAvatar.value = img['user-avatar-default.jpg'];
    }
    userName.value = data.realName;
    if (userName.value === null)
      userName.value = '未命名';
  }
  catch (error) {
    console.error("获取用户信息失败: ", error);
  }
};

onMounted(() => {
  fetchUserInfo();
});
</script>

<template>
  <!-- 使用 Ant Design Vue 的 Layout 组件进行页面布局 -->
  <a-layout style="height: 100vh;">
    <SideBar />
    <!-- 主体布局，包含左侧 Sider 和右侧内容区域 -->
    <a-layout class="main-layout" :style="{ backgroundImage }">
      <AppHeader />
      <a-layout-content class="overflow-hidden h-full">
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style lang="scss" scoped>
@use '@/style/custom-theme.scss' as *;
.content-layout {
  overflow: hidden;  /* 添加这行来禁止滚动 */
  height: 100%;     /* 确保内容区域高度正确 */
}
.main-layout {
  background-size: cover;
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
